import { useEffect, useState } from 'react';
import http from '../api/index'

interface DoctorProps {
  department?: string;
}

interface DoctorData {
  id: number;
  doctorname: string;
  doctorcity: string;
  doctoradministre: string;
  socoadmin: string;
  doctorimage: string;
  doctorgood: number;
  doctorbrowse: number;
  department?: string; // 科室信息
}

function Doctor({ department ='妇产科' }: DoctorProps) {
  const [doctors, setDoctors] = useState<DoctorData[]>([]);
  const [loading, setLoading] = useState(true);
  console.log(doctors);

  const getdata = async () => {
    try {
      setLoading(true);
      // 根据科室参数获取对应的医生数据
      const res = await http.get(`/api/doctor/list?department=${department}`);
      console.log(`获取${department}科室的医生数据:`, res.data.data);
      setDoctors(res.data.data || []);
    } catch (error) {
      console.error('获取医生数据失败:', error);
    } finally {
      setLoading(false);
    }
  }
  useEffect(() => {
    getdata();
  }, [department]);

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '20px' }}>
        <div>正在加载 {department} 科室的医生信息...</div>
      </div>
    );
  }
  return (
    <div style={{ padding: '10px' }}>
      <div style={{ 
        marginBottom: '10px', 
        padding: '8px 12px', 
        background: '#f0f8ff', 
        borderRadius: '4px',
        fontSize: '14px',
        color: '#1890ff'
      }}>
        当前科室：{department}
      </div>
      {doctors.length > 0 ? (
        <div style={{ display: 'grid', gap: '10px' }}>
          {doctors.map((doctor) => (
            <div key={doctor.id} style={{
              background: '#fff',
              padding: '15px',
              borderRadius: '8px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
              display: 'flex',
              alignItems: 'center',
              gap: '15px'
            }}>
               <img
                 src={doctor.doctorimage || '/default-avatar.png'}
                 alt={doctor.doctorname}
                style={{
                  width: '60px',
                  height: '60px',
                  borderRadius: '50%',
                  objectFit: 'cover'
                }}
              />
              <div style={{ flex: 1 }}>
                <h4 style={{ margin: '0 0 5px 0', fontSize: '16px' }}>{doctor.doctorname}</h4>
                <p style={{ margin: '0 0 5px 0', color: '#666', fontSize: '14px' }}>{doctor.doctorcity}</p>
                <p style={{ margin: '0 0 5px 0', color: '#999', fontSize: '12px' }}>{doctor.doctoradministre} {doctor.socoadmin}</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                  <span style={{ color: '#ff6b35', fontSize: '12px' }}>
                    ⭐ {doctor.doctorgood}
                  </span>
                  <span style={{ color: '#999', fontSize: '12px' }}>
                    已咨询 {doctor.doctorbrowse} 次
                  </span>
                </div>
              </div>
              <button style={{
                background: '#1890ff',
                color: 'white',
                border: 'none',
                padding: '8px 16px',
                borderRadius: '4px',
                fontSize: '14px',
                cursor: 'pointer'
              }}>
                咨询
              </button>
            </div>
          ))}
        </div>
      ) : (
        <div style={{ textAlign: 'center', padding: '20px', color: '#999' }}>
          暂无医生信息
        </div>
      )}
    </div>
  );
}

export default Doctor
